<template>
  <div>
    <el-drawer
      v-model="dialogVisible"
      :show-close="false"
      size="560px">
      <template #header>
        <div class="search-custom-title-nav">
          <p class="title">查询条件</p>
          <div>
            <el-button size="small" @click="handleClose">关闭</el-button>
            <el-button size="small" @click="handleReset">重置</el-button>
            <el-button size="small" type="primary" @click="handleSearch">查询</el-button>
          </div>
        </div>
      </template>
      <el-scrollbar class="search-main-wrap">
        <div>
          <div class="module-title">查询条件</div>
          <slot/>
        </div>
      </el-scrollbar>
    </el-drawer>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue'

// ---------------------props-------------------
const props = defineProps({
  visible: Boolean // 可见性
})

// emit
const emit = defineEmits(['update:visible', 'reset', 'search'])

// 组件可见性
const dialogVisible = computed({
  get: () => props.visible,
  set: (v) => {
    emit('update:visible', v)
  }
})

// ---------------------按钮功能-------------------
const handleReset = () => {
  emit('reset')
  dialogVisible.value = false
}
const handleSearch = () => {
  emit('search')
  dialogVisible.value = false
}
const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style scoped lang="scss">
// 一般搜索组件抽屉内部的样式
.search-custom-title-nav{
  display: flex;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #EBEEF5;
  .title{
    color: #444;
    font-size: 16px;
    font-weight: 600;
  }
}
.search-main-wrap{
  height: calc(100vh - 50px - 40px - 10px);
  min-height: 200px;
}
.input-width{
  width: 250px;
}
.form-date {
  width: 350px;
}
</style>
